<template>
  <section class="Block">
    <a-spin tip="加载中..." class="position" v-if="loading"> </a-spin>
    <a-tabs v-model="activeKey">
      <template #tabBarExtraContent>
        <Button
          type="search"
          label="刷新"
          @click="getDetails"
        />
      </template>
      <a-tab-pane key="1" tab="实时信息">
        <div class="Box">
          <a-form :model="details" :label-col="{ span: 6 }" :wrapper-col="{ span: 18 }">
            <template v-for="(realTimeForm, index) in details.realTimeList">
              <a-card :title="'格口序号: ' + realTimeForm.binIndex" :key="index">
                <a-row type="flex" justify="space-between">
                  <a-col :span="24" v-if="realTimeForm.fault && realTimeForm.fault[0]">
                    <a-col :span="12">
                      <Input
                        :form="realTimeForm.fault[0]"
                        prop="faultName"
                        label="故障名称"
                        placeholder=" "
                        readonly>
                      </Input>
                    </a-col>
                    <a-col :span="12">
                      <Input
                        :form="realTimeForm.fault[0]"
                        prop="receiveTime"
                        label="接收时间"
                        placeholder=" "
                        readonly>
                      </Input>
                    </a-col>
                  </a-col>
                  <template v-if="realTimeForm.realTimeStatus">
                    <a-col :span="12">
                      <Select
                        :form="realTimeForm.realTimeStatus"
                        prop="binStatus"
                        label="格口状态"
                        placeholder=" "
                        :optList="enumsTypeJson['cn.com.hangar.chargingcabinet.common.entities.CabinetBinStateEntity.BinStatus']"
                        readonly>
                      </Select>
                    </a-col>
                    <a-col :span="12">
                      <Input
                        :form="realTimeForm.realTimeStatus"
                        prop="voltage"
                        label="充电电压"
                        placeholder=" "
                        suffix="V"
                        :precision="2"
                        readonly>
                      </Input>
                    </a-col>
                    <a-col :span="12">
                      <Input
                        :form="realTimeForm.realTimeStatus"
                        prop="current"
                        label="充电电流"
                        placeholder=" "
                        suffix="A"
                        :precision="2"
                        readonly>
                      </Input>
                    </a-col>
                    <a-col :span="12">
                      <Input
                        :form="realTimeForm.realTimeStatus"
                        prop="power"
                        label="有功功率"
                        placeholder=" "
                        suffix="W"
                        :precision="1"
                        readonly>
                      </Input>
                    </a-col>
                    <a-col :span="12">
                      <Input
                        :form="realTimeForm.realTimeStatus"
                        prop="energy"
                        label="有功电能"
                        placeholder=" "
                        suffix="kW·h"
                        :precision="2"
                        readonly>
                      </Input>
                    </a-col>
                    <a-col :span="12">
                      <Input
                        :form="realTimeForm.realTimeStatus"
                        prop="fanStatus"
                        label="风机转速"
                        placeholder=" "
                        suffix="rpm"
                        readonly>
                      </Input>
                    </a-col>
                    <a-col :span="12">
                      <Input
                        :form="realTimeForm.realTimeStatus"
                        prop="temperature"
                        label="实时温度"
                        placeholder=" "
                        suffix="℃"
                        :precision="1"
                        readonly>
                      </Input>
                    </a-col>
                    <a-col :span="12">
                      <Select
                        :form="realTimeForm.realTimeStatus"
                        prop="doorStatus"
                        label="仓门状态"
                        placeholder=" "
                        :optList="enumsTypeJson.CabinetBinDoorStatus"
                        readonly>
                      </Select>
                    </a-col>
                  </template>
                </a-row>
              </a-card>
              <br :key="'br/' + index" />
            </template>
          </a-form>
        </div>
      </a-tab-pane>
      <a-tab-pane key="2" tab="使用信息">
        <div class="Box">
          <a-form :model="details" :label-col="{ span: 6 }" :wrapper-col="{ span: 18 }">
            <template v-for="(useForm, index2) in details.useList">
              <a-card :title="'格口序号: ' + useForm.binIndex" :key="index2">
                <a-row type="flex" justify="space-between">
                  <a-col :span="24" v-if="useForm.userCharging.user">
                    <a-col :span="12">
                      <Input
                        :form="useForm.userCharging.user"
                        prop="name"
                        label="客户姓名"
                        placeholder=" "
                        readonly>
                      </Input>
                    </a-col>
                    <a-col :span="12">
                      <Input
                        :form="useForm.userCharging.user"
                        prop="mobile"
                        label="手机号"
                        placeholder=" "
                        readonly>
                      </Input>
                    </a-col>
                  </a-col>
                  <a-col :span="12">
                    <Input
                      :form="useForm.userCharging"
                      prop="serialNumber"
                      label="交易流水号"
                      placeholder=" "
                      readonly>
                    </Input>
                  </a-col>
                  <a-col :span="12">
                    <Select
                      :form="useForm.userCharging"
                      prop="businessState"
                      label="业务状态"
                      placeholder=" "
                      :optList="enumsTypeJson.BusinessState"
                      readonly>
                    </Select>
                  </a-col>
                  <a-col :span="12">
                    <datePicker
                      :form="useForm.userCharging"
                      prop="beginTime"
                      label="开始时间"
                      placeholder=" "
                      readonly>
                    </datePicker>
                  </a-col>
                  <a-col :span="12">
                    <datePicker
                      :form="useForm.userCharging"
                      prop="endTime"
                      label="结束时间"
                      placeholder=" "
                      readonly>
                    </datePicker>
                  </a-col>
                  <a-col :span="12">
                    <Input
                      :form="useForm.userCharging"
                      prop="chargingSecond"
                      label="充电时长"
                      placeholder=" "
                      suffix="秒"
                      readonly>
                    </Input>
                  </a-col>
                  <a-col :span="12">
                    <Input
                      :form="useForm.userCharging"
                      prop="surplusSecond"
                      label="剩余时长"
                      placeholder=" "
                      suffix="秒"
                      readonly>
                    </Input>
                  </a-col>
                  <a-col :span="12">
                    <Input
                      :form="useForm.userCharging"
                      prop="chargingPower"
                      label="充电电量"
                      placeholder=" "
                      readonly>
                    </Input>
                  </a-col>
                  <a-col :span="12">
                    <Input
                      :form="useForm.userCharging"
                      prop="chargingFees"
                      label="充电费用"
                      placeholder=" "
                      suffix="元"
                      readonly>
                    </Input>
                  </a-col>
                  <a-col :span="12">
                    <Input
                      :form="useForm.userCharging"
                      prop="occupyFees"
                      label="占仓费用"
                      placeholder=" "
                      suffix="元"
                      readonly>
                    </Input>
                  </a-col>
                  <a-col :span="12">
                    <Select
                      :form="useForm.userCharging"
                      prop="terminalType"
                      label="终端类型"
                      placeholder=" "
                      :optList="enumsTypeJson.PayWay"
                      readonly>
                    </Select>
                  </a-col>
                  <!-- <a-col :span="12">
                    <Input
                      :form="useForm.userCharging"
                      prop="stopChargingReason"
                      label="停止充电原因"
                      placeholder=" "
                      readonly>
                    </Input>
                  </a-col> -->
                  <a-col :span="12">
                    <datePicker
                      :form="useForm.userCharging"
                      prop="receiveTime"
                      label="接收时间"
                      placeholder=" "
                      readonly>
                    </datePicker>
                  </a-col>
                </a-row>
              </a-card>
              <br :key="'br/' + index2" />
            </template>
          </a-form>
        </div>
      </a-tab-pane>
      <a-tab-pane key="3" tab="基本信息">
        <div class="Box">
          <a-form :model="basicForm" :label-col="{ span: 6 }" :wrapper-col="{ span: 18 }">
            <a-row type="flex" justify="space-between">
              <a-col :span="12">
                <Input
                  :form="basicForm"
                  prop="code"
                  label="设备编号"
                  placeholder=" "
                  readonly>
                </Input>
              </a-col>
              <a-col :span="12">
                <Input
                  :form="basicForm"
                  prop="name"
                  label="设备名称"
                  placeholder=" "
                  readonly>
                </Input>
              </a-col>
              <a-col :span="12">
                <Select
                  :form="basicForm"
                  prop="isOnLine"
                  label="联网状态"
                  placeholder=" "
                  :optList="getYesNo()"
                  readonly>
                </Select>
              </a-col>
              <a-col :span="12">
                <Input
                  :form="basicForm"
                  prop="model.name"
                  label="设备型号"
                  placeholder=" "
                  readonly>
                </Input>
              </a-col>
              <a-col :span="12">
                <Input
                  :form="basicForm"
                  prop="model.type.name"
                  label="设备类型"
                  placeholder=" "
                  readonly>
                </Input>
              </a-col>
              <template v-if="basicForm.realTimeStatus">
                <a-col :span="12">
                  <Input
                    :form="basicForm.realTimeStatus"
                    prop="current"
                    label="额定电流"
                    placeholder=" "
                    suffix="A"
                    readonly>
                  </Input>
                </a-col>
                <a-col :span="12">
                  <Input
                    :form="basicForm.realTimeStatus"
                    prop="voltage"
                    label="额定电压"
                    placeholder=" "
                    suffix="V"
                    readonly>
                  </Input>
                </a-col>
                <a-col :span="12">
                  <Input
                    :form="basicForm.realTimeStatus"
                    prop="quantity"
                    label="有功电量"
                    placeholder=" "
                    suffix="kW·h"
                    readonly>
                  </Input>
                </a-col>
                <a-col :span="12">
                  <Input
                    :form="basicForm.realTimeStatus"
                    prop="humidity"
                    label="湿度"
                    placeholder=" "
                    suffix="%"
                    readonly>
                  </Input>
                </a-col>
                <a-col :span="12">
                  <Input
                    :form="basicForm.realTimeStatus"
                    prop="temperature"
                    label="温度"
                    placeholder=" "
                    suffix="℃"
                    readonly>
                  </Input>
                </a-col>
                <a-col :span="12">
                  <datePicker
                    :form="basicForm.realTimeStatus"
                    prop="receiveTime"
                    label="数据接收时间"
                    format="YYYY-MM-DD HH:mm:ss"
                    placeholder=" "
                    readonly>
                  </datePicker>
                </a-col>
              </template>
              <a-col :span="12">
                <Input
                  :form="basicForm"
                  prop="charge.title"
                  label="费用模板"
                  placeholder=" "
                  readonly>
                </Input>
              </a-col>
              <a-col :span="12">
                <Input
                  :form="basicForm"
                  prop="charge.occupyChargePrice"
                  label="占仓收费"
                  suffix="元"
                  placeholder=" "
                  readonly>
                </Input>
              </a-col>
              <a-col :span="12">
                <Input
                  :form="basicForm"
                  prop="address"
                  label="地址"
                  placeholder=" "
                  readonly>
                </Input>
              </a-col>
              <a-col :span="12">
                <datePicker
                  :form="basicForm"
                  prop="installDate"
                  label="安装日期"
                  placeholder=" "
                  readonly>
                </datePicker>
              </a-col>
              <a-col :span="12">
                <datePicker
                  :form="basicForm"
                  prop="productionDate"
                  label="出厂日期"
                  placeholder=" "
                  readonly>
                </datePicker>
              </a-col>
              <a-col :span="12">
                <datePicker
                  :form="basicForm"
                  prop="repairTime"
                  label="保修到期时间"
                  placeholder=" "
                  readonly>
                </datePicker>
              </a-col>
              <a-col :span="12">
                <datePicker
                  :form="basicForm"
                  prop="simExpire"
                  label="SIM卡到期"
                  placeholder=" "
                  readonly>
                </datePicker>
              </a-col>
              <a-col :span="12">
                <Input
                  :form="basicForm"
                  prop="simIccid"
                  label="SIM卡ICCID"
                  placeholder=" "
                  readonly>
                </Input>
              </a-col>
            </a-row>
          </a-form>
        </div>
      </a-tab-pane>
    </a-tabs>
  </section>
</template>
<script>
import {
  // loadCabinetById
  loadCabinetWithBin
} from '@/api/api';
import Input from '@/components/typicalControl/Input';
import InputNumber from '@/components/typicalControl/InputNumber';
import datePicker from '@/components/typicalControl/datePicker';
import treeSelect from '@/components/typicalControl/treeSelect';
import Select from '@/components/typicalControl/select';
import Button from '@/components/typicalControl/button';
import { getListEnumsJson, getYesNo } from '@/utils/frequentInterface';
export default {
  name: 'EquipmentControlDetails',
  components: {
    Input: Input,
    InputNumber: InputNumber,
    treeSelect: treeSelect,
    Select: Select,
    Button: Button,
    datePicker: datePicker
  },
  props: {
    id: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      activeKey: '1',
      loading: false,
      details: {
        realTimeList: [],
        useList: []
      },
      basicForm: {
        name: undefined,
        code: undefined,
        model: {
          name: undefined,
          type: {
            name: undefined
          }
        },
        charge: {
          title: undefined,
          occupyChargePrice: undefined
        }
      },
      enumsType: [
        'cn.com.hangar.chargingcabinet.common.entities.CabinetBinStateEntity.BinStatus',
        'CabinetBinDoorStatus',
        'BusinessState',
        'PayWay'
      ],
      enumsTypeJson: {}
    };
  },
  created() {
    this.getDictionary();
    this.getDetails();
  },
  mounted() {
  },
  methods: {
    getYesNo,
    /**
     * [getDictionary 获取各种字典]
     * @return {[type]} [description]
     */
    getDictionary() {
      this.enumsTypeJson = getListEnumsJson(this.enumsType);
    },
    /**
     * [getDetails 加载详情]
     * @return {[type]} [description]
     */
    // getDetails() {
    //   if (!this.id) throw new Error('没有传入充电柜id！');
    //   this.loading = true;
    //   loadCabinetById({ id: this.id }).then(res => {
    //     Object.assign(this.basicForm, res.data);
    //     var arr, obj, i;
    //     if (res.data && res.data.cabinetBins) {
    //       arr = res.data.cabinetBins;
    //       this.details.realTimeList = [];
    //       for (i = 0; i < arr.length; i++) {
    //         obj = arr[i];
    //         if (obj.realTimeStatus) {
    //           // obj.realTimeStatus.voltage = 1;
    //           // console.log('11111111', obj.realTimeStatus.voltage);
    //           this.multipleTransformation(obj.realTimeStatus, 'voltage', 0.01);
    //           this.multipleTransformation(obj.realTimeStatus, 'current', 0.01);
    //           this.multipleTransformation(obj.realTimeStatus, 'power', 0.1);
    //           this.multipleTransformation(obj.realTimeStatus, 'energy', 0.01);
    //           this.multipleTransformation(obj.realTimeStatus, 'temperature', 0.1);
    //           this.multipleTransformation(obj.realTimeStatus, 'fanStatus', 100);
    //         }
    //         this.details.realTimeList.push(obj);
    //       }
    //     }
    //     if (res.data && res.data.cabinetBins) {
    //       arr = res.data.cabinetBins;
    //       this.details.useList = [];
    //       for (i = 0; i < arr.length; i++) {
    //         this.details.useList.push(arr[i]);
    //       }
    //     }
    //   }).finally(() => {
    //     this.loading = false;
    //   });
    // },
    getDetails() {
      if (!this.id) throw new Error('没有传入充电柜id！');
      this.loading = true;
      loadCabinetWithBin({ id: this.id }).then(res => {
        Object.assign(this.basicForm, res.data);
        var arr, obj, i;
        if (res.data && res.data.cabinetBinVo) {
          arr = res.data.cabinetBinVo;
          this.details.realTimeList = [];
          for (i = 0; i < arr.length; i++) {
            obj = arr[i];
            if (obj.realTimeStatus) {
              // obj.realTimeStatus.voltage = 1;
              // console.log('11111111', obj.realTimeStatus.voltage);
              this.multipleTransformation(obj.realTimeStatus, 'voltage', 0.01);
              this.multipleTransformation(obj.realTimeStatus, 'current', 0.01);
              this.multipleTransformation(obj.realTimeStatus, 'power', 0.1);
              this.multipleTransformation(obj.realTimeStatus, 'energy', 0.01);
              this.multipleTransformation(obj.realTimeStatus, 'temperature', 0.1);
              this.multipleTransformation(obj.realTimeStatus, 'fanStatus', 100);
            }
            this.details.realTimeList.push(obj);
          }
        }
        if (res.data && res.data.cabinetBinVo) {
          arr = res.data.cabinetBinVo;
          this.details.useList = [];
          for (i = 0; i < arr.length; i++) {
            this.details.useList.push(arr[i]);
          }
        }
      }).finally(() => {
        this.loading = false;
      });
    },
    /**
     * [multipleTransformation 转换倍率]
     * @param  {[type]} val          [对象实体]
     * @param  {[type]} attribute    [属性]
     * @param  {[type]} expand       [倍率]
     * @return {[type]}              [description]
     */
    multipleTransformation(val, attribute, expand) {
      if (val[attribute]) {
        val[attribute] = Number(val[attribute]) * expand;
      }
    }
  }
};
</script>

<style scoped>
  .Block{
    position: relative;
    width: 100%;
    height: 100%;
  }
  .Block .position{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 999;
    background: white;
  }
  .Box{
    height: 480px;
    overflow: auto;
  }
</style>
